<template lang="html">
    <div class="right_notice">
          <div class="title_styl">
            <div class="title_left">
              <Lines
                class="line_styl"
                backColor="#2973E4"
                widthNum="6px"
                heightNum="30px"
              ></Lines>
              <div class="title_name">{{ pageType == 'news' ? '资讯专区' : '企业公告'}}</div>
            </div>
            <div class="title_right" @click="clickFun('clickMore')">
              <div class="more_styl">更多</div>
              <Icons
                font="#icon-jt"
                class="icon-jt"
                fontSize="12px"
              ></Icons>
            </div>
          </div>
          <img
            class="img_notice"
            src="@/assets/images/company_notice.png"
            alt=""
          >
          <div
            class="notice_item"
            v-for="(item, index) in 3"
            :key="index"
            @click="clickFun('clickItem')"
          >
            <div class="notice_title">
              喜报！振华消防在港区消防员职通消防在港区消防员业技通消防在港区消防员能...</div>
            <div class="notice_content">
              <img
                class="img_noticeItem"
                src="@/assets/images/company_notice.png"
                alt=""
              >
              <div class="content_noticestyl">为进一步巩固企业消防队灭火救援方面的业务能力，有效预防和应对各和应对各类灭火类灭火和应对各类灭火救援。7月26日下午，东</div>
            </div>
            <div class="auth_styl">
              <Icons
                font="#icon-rt"
                class="icon-rt"
                fontSize="16px"
              ></Icons>
              <div class="auther_name">张三</div>
            </div>
            <Lines
              v-show="index != 2"
              class="line_styl"
              widthNum="100%"
              heightNum="1px"
              marginUpdown="14px"
              backColor="#d8d8d8"
            ></Lines>
          </div>
        </div>
</template>
 
<script>
export default {
  name: "QdNotice",
  data() {
    return {};
  },
  props: {
    pageType: {
      type: String,
      default: "notice" // news资讯 notice公告
    },
    dataList: {
      type: Array,
      default: () => [] // 数据列表
    },
  },
  watch: {},
  mounted() { },
  methods: {
    clickFun(type, query) {
      if (this.pageType == 'news') {
        let path = type == 'clickMore' ? '/news' : '/news/news-detail';
        this.$router.push({
          path,
          query: {
            id: 1
          }
        })
        // this.$emit('clickFun', path);
      }
      if (this.pageType == 'notice') {
        let path = type == 'clickMore' ? '/notice' : '/notice/notice-detail';
        this.$router.push({
          path,
          query: {
            id: 1
          }
        })
        // this.$emit('clickFun', path);
      }
    }
  }
};
</script>
 
<style lang="less" scoped>
@import "~@/assets/styles/main.less";
.right_notice {
  width: 318px;
  height: 662px;
  padding-top: 18px;
  background-color: #ffffff;
  .title_styl {
    .flex-x();
    .title_left {
      .flex-x(flex-start);
      .title_name {
        margin-left: 17px;
        font-size: 16px;
        font-weight: bold;
      }
      .title_desc {
        margin-left: 20px;
        font-size: 12px;
        color: #999999;
      }
    }
    .title_right {
      .flex-x();
      padding-right: 20px;
      cursor: pointer;
      .more_styl {
        color: #999999;
        margin-right: 6px;
        font-size: 12px;
      }
    }
  }
  .img_notice {
    margin: 22px 0 18px 0;
  }
  .notice_item {
    padding: 0 18px 0 20px;
    margin-bottom: 28px;
    cursor: pointer;
    .notice_title {
      margin-bottom: 6px;
      text-align: left;
      .one-ellipsis();
    }
    .notice_content {
      .flex-x();
      .img_noticeItem {
        width: 92px;
        height: 40px;
        margin-right: 6px;
      }
      .content_noticestyl {
        font-size: 12px;
        .more-ellipsis(3);
      }
    }
    .auth_styl {
      .flex-x(flex-start);
      margin-top: 12px;
      .auther_name {
        margin-left: 4px;
        color: #d8d8d8;
      }
    }
    .line_styl {
    }
  }
}
</style>